<template>
  <div class="defaultBackground container invate fixed">
    <Header content="邀请" :showBack="false"></Header>
    <div class="qcodeContain whiteColor clear">
      <div class="font14">
        <input type="text" v-model="qrcodeContent" id="copy_invate_code" style="opacity: 0;position: absolute;left: -100%;">
        <div
          data-clipboard-action="copy"
          data-clipboard-target="#copy_invate_code"
          class="codeTab"
          @click="copy()"
        >
          我的推广码：{{qrcodeContent}}
          <span style="margin-left: 30px;">
            <img src="../assets/img/copy.png" alt="" style="width: 12px;">
            复制
          </span>
        </div>
      </div>
      <div>
        <qrcode :size="70" :value="qrcodeContent" type="img" id="qrcode"></qrcode>
        <ul class="font12" style="width: calc(100% - 90px);">
          <li>
            <span class="dot"></span>推荐人数：{{inviteInfo.one_invite_number}}人
          </li>
          <li>
            <span class="dot"></span>二级人数：{{inviteInfo.two_invite_number}}人
          </li>
          <li>
            <span class="dot"></span>三级人数：{{inviteInfo.three_invite_number}}人
          </li>
          <li style="word-break:keep-all;white-space:nowrap;">
            <span class="dot"></span>累计收益：{{inviteInfo.invite_profit_btc}} + {{inviteInfo.invite_profit_eth}}
          </li>
        </ul>
      </div>
    </div>
    <div style="height: 30px;color: #ffffff;background: #414351;line-height: 30px;padding:0 4%;">
      被邀请人
    </div>
    <div class="invateList whiteColor fixedBottom">
      <scroller
        :pulldown-config="{content: '下拉刷新',downContent: '下拉刷新',upContent: '释放刷新'}"
        :pullup-config="{content: '上拉加载',downContent: '松开加载',upContent: '上拉加载'}"
        lock-x
        scrollbar-y
        height="-309"
        ref="scroller"
        @on-pullup-loading="onScrollBottom()"
        :use-pullup="true"
        :use-pulldown="true"
        @on-pulldown-loading="onScrollTop()"
      >
        <div>
          <div v-for="item in invateList" v-if="invateList.length>0" class="invitaListItem">
            <flexbox>
              <flexbox-item><div class="font16">{{item.nickname}}</div></flexbox-item>
              <flexbox-item>
                <div>
                  <flexbox orient="vertical">
                    <flexbox-item><div class="rigth font14">{{item.msg}}</div></flexbox-item>
                    <flexbox-item><div class="rigth" style="color: #A3A3A7;font-size: 12px;">{{item.timeline | timestamp}}</div></flexbox-item>
                  </flexbox>
                </div>
              </flexbox-item>
            </flexbox>
          </div>
          <div v-if="invateList.length==0" style="text-align: center;height: 300px;line-height: 300px;">
            暂无数据
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>
<script>
  import Header from './common/header.vue'
  import { Qrcode } from 'vux'
  import { Flexbox, FlexboxItem,Scroller } from 'vux'
  import Clipboard from 'clipboard';
  export default{
    data(){
      return {
        invateList:[],
        page:{
          page:1,
          pasesize:15,
          total_pages:0,
        },
        qrcodeContent:'',
        inviteInfo:{},
        onFetching:false,
        onFetching1:false,
      }
    },
    methods:{
      onScrollTop(){
        if (this.onFetching1) {
        } else {
          this.onFetching1 = true;
          this.page.page = 1;
          this.invateList = [];
          this.invite('pullDown');
        }
      },
      onScrollBottom () {
        if (this.onFetching) {} else {
          this.onFetching = true;
          var that = this;
          that.page.page ++;
          this.invite('pullUp');
        }
      },
      invite(type){
        this.loading(true);
        this.service('invite',{
          page:this.page.page,
          pasesize:this.page.pasesize
        }).then((res)=> {
          console.log(res)
          this.loading(false);
          this.invateList = this.invateList.concat(res.data);
          this.page.total_pages = res.meta.pagination.total_pages;
          this.$nextTick(() => {
            if(this.page.total == 0 || (this.page.total_pages == this.page.page)){
              this.$refs.scroller.disablePullup();
              this.$refs.scroller.reset({top:0});
            }else{
              if(type === 'pullDown'){
                this.$refs.scroller.reset({top:0});
              }
              this.$refs.scroller.donePulldown();
              this.$refs.scroller.enablePullup();
            }
          })
          this.onFetching = false;
          this.onFetching1 = false;
        })
      },
      copy(){
        var that = this;
        this.copyBtn = new Clipboard('.codeTab');
        let clipboard = this.copyBtn;
        clipboard.on('success',(res)=> {
          this.showInvateCode = false;
          that.toastFn('复制成功','','success');
          clipboard.destroy()
        })
        clipboard.on('error', ()=>{
          that.toastFn('复制失败，请手动复制');
          clipboard.destroy()
        })
      },
      invite_meta(){
        this.loading(true);
        this.service('invite_meta',{}).then(res=>{
          this.loading(false);
          this.inviteInfo = res.data;
        })
      }
    },
    created(){
      this.qrcodeContent = String(JSON.parse(localStorage.getItem('userInfo')).uid);
      this.onScrollTop();
      this.invite_meta();
    },
    components:{
      Header,Qrcode,Flexbox, FlexboxItem,Scroller
    }
  }
</script>
<style>
  .invate .qcodeContain{
    border-radius: 3px;
    margin:10px 4%;
    padding:10px 20px 10px 10px;
    background: -webkit-linear-gradient(left top, #6536D0 , #6A67FA); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right,#6536D0 , #6A67FA); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right,#6536D0 , #6A67FA); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, #6536D0 , #6A67FA); /* 标准的语法（必须放在最后） */
  }
  .qcodeContain ul{
    margin-top: 30px;
    float: left;
  }
  #qrcode{
    float: right;
    color: white;
    padding: 10px;
    background: white;
    margin-top: 5px;
  }
  #qrcode img{
    display: block;
  }
  .qcodeContain ul>li{
    margin-top: 5px;
  }
  .dot{
    display: inline-block;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: white;
    vertical-align: middle;
    margin-right: 10px;
  }
  .invateList{
    margin-left: 4%;
  }
  .invateList .invitaListItem{
    border-bottom: 1px solid #21222A;
    padding:10px 0;
  }
  .rigth{
    text-align: right;
    padding-right: 20px;
  }
</style>
